<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>
    <div class="a"></div>

    <script>
        // 伪数组使用 结构赋值的方式
        const all = document.querySelectorAll('.a')

        ;
        [...all].map((el) => {
            console.log(el);
            return el
        })





        const user = {
            name: "佐助",
            age: 20,
            wife: {
                name: "小樱",
                age: 18
            }
        }

        // 给目标对象创建代理对象,  给目标对象的一些设置
        const proxyUser = new Proxy(user, {

            get(target, prop) {
                console.log("get", target, prop);
                return Reflect.get(target, prop)
            },
            // 修改目标对象的属性值,或者是获取目标对象的属性
            set(target, prop, val) {
                console.log("set");
                console.log(Reflect.has(target, prop));
                return Reflect.set(target, prop, val)
            },
            deleteProperty(target, prop) {
                return Reflect.deleteProperty(target, prop, val)
            }


        })

        console.log(proxyUser.name);
        proxyUser.name = "鸣人"
        console.log(user);

        proxyUser.wife.name = "雏田"
        console.log(user);



        console.log("============");


        const user1 = {
            name: "dxk",
            age: "18"
        }


        // 只能劫持到某个属性,如果想要全部都进行劫持的话,就需要进行遍历  -- 而proxy是直接代理对象
        function observe(obj) {
            if (typeof obj !== 'object' || obj == null) {
                return
            }
            Object.keys(obj).forEach(key => {
                defineReactive(obj, key, obj[key])
            })
        }



        Object.keys(user1).forEach(el => {

            var val = user1[el]
            Object.defineProperty(user1, el, {
                get() {
                    console.log("获取数据", val);
                    return val
                },

                set(vals) {
                    console.log("设置数据", val);
                    val = vals
                },
            })
        })


        console.log(user1.name, "name");
        console.log(user1.name = "kk");
        console.log(user1);
    </script>
</body>

</html>